<template>
  <div>

    <el-form :inline="true">
      <el-form-item label="计划类型：">
        
        <el-select v-model="yearBillDTO.opPlanType" opPlanType="Select" style="width: 130px">
          <el-option v-for="item in opPlanTypes" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="物料编号：">
        <el-input v-model="yearBillDTO.materialId" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="物料名称：">
        <el-input v-model="yearBillDTO.materialName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="资产编号：">
        <el-input v-model="yearBillDTO.propertyId" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="计划年份：">
        <el-select v-model="yearBillDTO.year" placeholder="请选择年份" style="width: 180px">
          <el-option v-for="item in years" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="primary" @click="handleEdit('')">重置</el-button>
    </el-form>

    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="opPlanType" label="计划类型"></el-table-column>
      <el-table-column prop="materialId" label="物料编号"></el-table-column>
      <el-table-column prop="materialName" label="物料名称"></el-table-column>
      <el-table-column label="1月">
        <el-table-column prop="1inNUm" label="入库"></el-table-column>
        <el-table-column prop="1outNUm" label="出库"></el-table-column>
        <el-table-column prop="1remainNum" label="剩余"></el-table-column>
      </el-table-column>
      <el-table-column label="2月">
        <el-table-column prop="2inNUm" label="入库"></el-table-column>
        <el-table-column prop="2outNUm" label="出库"></el-table-column>
        <el-table-column prop="2remainNum" label="剩余"></el-table-column>
      </el-table-column>
      <el-table-column label="3月">
        <el-table-column prop="3inNUm" label="入库"></el-table-column>
        <el-table-column prop="3outNUm" label="出库"></el-table-column>
        <el-table-column prop="3remainNum" label="剩余"></el-table-column>
      </el-table-column>
      <el-table-column label="4月">
        <el-table-column prop="4inNUm" label="入库"></el-table-column>
        <el-table-column prop="4outNUm" label="出库"></el-table-column>
        <el-table-column prop="4remainNum" label="剩余"></el-table-column>
      </el-table-column>
      <el-table-column label="5月">
        <el-table-column prop="5inNUm" label="入库"></el-table-column>
        <el-table-column prop="5outNUm" label="出库"></el-table-column>
        <el-table-column prop="5remainNum" label="剩余"></el-table-column>
      </el-table-column>
      <el-table-column label="6月">
        <el-table-column prop="6inNUm" label="入库"></el-table-column>
        <el-table-column prop="6outNUm" label="出库"></el-table-column>
        <el-table-column prop="6remainNum" label="剩余"></el-table-column>
      </el-table-column>
      <el-table-column label="7月">
        <el-table-column prop="7inNUm" label="入库"></el-table-column>
        <el-table-column prop="7outNUm" label="出库"></el-table-column>
        <el-table-column prop="7remainNum" label="剩余"></el-table-column>
      </el-table-column>
      <el-table-column label="8月">
        <el-table-column prop="8inNUm" label="入库"></el-table-column>
        <el-table-column prop="8outNUm" label="出库"></el-table-column>
        <el-table-column prop="8remainNum" label="剩余"></el-table-column>
      </el-table-column>
      <el-table-column label="9月">
        <el-table-column prop="9inNUm" label="入库"></el-table-column>
        <el-table-column prop="9outNUm" label="出库"></el-table-column>
        <el-table-column prop="9remainNum" label="剩余"></el-table-column>
      </el-table-column>
      <el-table-column label="10月">
        <el-table-column prop="10inNUm" label="入库"></el-table-column>
        <el-table-column prop="10outNUm" label="出库"></el-table-column>
        <el-table-column prop="10remainNum" label="剩余"></el-table-column>
      </el-table-column>
      <el-table-column label="11月">
        <el-table-column prop="11inNUm" label="入库"></el-table-column>
        <el-table-column prop="11outNUm" label="出库"></el-table-column>
        <el-table-column prop="11remainNum" label="剩余"></el-table-column>
      </el-table-column>
      <el-table-column label="12月">
        <el-table-column prop="12inNUm" label="入库"></el-table-column>
        <el-table-column prop="12outNUm" label="出库"></el-table-column>
        <el-table-column prop="12remainNum" label="剩余"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import financeApi from "@/api/finance";

export default {
  data() {
    return {
      //页面数据
      list: [],
      //查询条件
      yearBillDTO: {
        pageNo: 1,
        pageSize: 10,
        year: "",
        opPlanType:"",
        materialId:"",
        materialName:"",
        propertyId:"",
      },
      years: ["2021","2022","2023","2024"],
      count: 0,
      pojo: {
        status: 1
      },
      dialogFormVisible: false,
      id: "",
      opPlanTypes:[]
    };
  },
  created() {
    //在创建vue实例后触发钩子函数
    this.fetchData();
  },
  methods: {
    fetchData() {
      
      //发起axios请求  获取后端的数据，赋值给模型
      financeApi.year(this.yearBillDTO).then(response => {
        const data = response.data;
        let month = 0;
        let i = 0;
        let j = 0;
        let items = [];
        for (month, i, j; j < data.length; month++, j++) {
          if (month == 0) {
            items[i] = data[j];
          } else {
            const label1 = "" + month+"inNUm";
            const label2 = "" + month+"outNUm";
            const label3 = "" + month+"remainNum";
            items[i][label1] = data[j].inNUm;
            items[i][label2] = data[j].outNUm;
            items[i][label3] = data[j].remainNum;
          }
          if (month == 12) {
            month = -1;
            i++;
          }
        }
        this.list = items
        console.log(this.list);
      });

      financeApi.yearPlanType().then((response) => {
        this.opPlanTypes = response.data;
      });

    },
    sizeData(size) {
      this.yearBillDTO.pageSize = size;
      this.fetchData();
    },
    pageData(page) {
      this.yearBillDTO.pageNo = page;
      this.fetchData();
    },
    //新增和修改使用同一个方法打开对话框
    handleEdit(id) {
      this.dialogFormVisible = true;
      this.yearBillDTO.year="",
      this.yearBillDTO.opPlanType="",
      this.yearBillDTO.materialId="",
      this.yearBillDTO.materialName="",
      this.yearBillDTO.propertyId=""

    },

    },
  }

</script>